import React, { Component } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, Image } from 'react-native';
import SafeView from 'react-native-safe-area-view'
import { RouteHelper } from 'react-navigation-easy-helper'
import Toast from 'antd-mobile/lib/toast'
import NavPage from '../../common/NavPage'
import screen from '../../common/screen'
import FetchResources from '../../common/FetchResources'
import ButtonView from './ButtonView'
import axios from 'axios'
import qs from 'qs'

class TicketVerify extends Component {
  constructor(props) {
    super(props)
    let { consumptionName, consumptionId,price} = this.props.navigation.state.params
    this.state = {
      ticketNumber: '',
      isShowDetail: false,
      data:{},
      ticketType:'1',
      consumptionName:consumptionName||'',
      consumptionId:consumptionId||'',
      price:price||'',
      errorText:false
    }
  }

  goBack() {
    RouteHelper.pop()
  }

  getTicketInfo(QRcodeTicketNumber,type){
    this.setState({
      isShowDetail:false,
      errorText:false
    })
    let {consumptionId,ticketType,ticketNumber} = this.state
    if(type == 'input'){
      if(ticketNumber == ''){
        Toast.fail('请输入卡号或扫码',0.5)
        return 
      }
    }else if(type == 'input1'){
      if(ticketNumber == ''){
        return 
      }
    }else{
      this.setState({ticketNumber:QRcodeTicketNumber})
    }
    Toast.loading('加载中...', 0)
    let url = FetchResources.Fetch.Binding //门票绑定接口
    let cardType = ''
    if(ticketType == '1'){ //门票
      cardType = ''
    }else if(ticketType == '2'){//景区年卡
      cardType = ''
    }else if(ticketType == '3'){//腾旅卡
      cardType = 'tl'
    }else if(ticketType == '4'){//黄冈一卡通
      cardType = 'hg'
    }

		axios.post(url,
			qs.stringify({
				consumptionId: consumptionId,
				ticketNo: ticketNumber,
				cardNo: ticketNumber,
				cardType: cardType,
			})
		).then((response) => {
      Toast.hide()
      if(response.data.success){//查询成功
        this.setState({
          isShowDetail:true,
          data:response.data.data,
          errorText:false
        },()=>{
        })
      }else{
        this.setState({errorText:false})
        // Toast.fail('没有该号码信息，请重新输入或扫描查询',1)
      }
		}).catch((error) => {
      console.log('系统异常' + error)
      Toast.hide()
    })
  }

  componentDidMount() {
    let { consumptionName,consumptionId,price } = this.props.navigation.state.params
    this.setState({
      consumptionName,
      consumptionId,
      price
    })
  }

  immediateUse(){ // 查询该票包含二次项目，可以免费使用
    let {consumptionName,consumptionId,price,userType} = this.state.data
    let ticketNumber = this.state.ticketNumber
    RouteHelper.navigate('SellTicket',{consumptionName,consumptionId,price,ticketNumber,userType,needPay:'freeTicket'})
  }

  SellTicket(type){
    let ticketNumber = this.state.ticketNumber
    if(type === 'other'){
      let {consumptionName,consumptionId,price} = this.props.navigation.state.params
      RouteHelper.navigate('SellTicket',{consumptionName,consumptionId,price,ticketNumber,type,needPay:''})
    }else{
      let {consumptionName,consumptionId,price,userType} = this.state.data
      RouteHelper.navigate('SellTicket',{consumptionName,consumptionId,price,userType,ticketNumber,needPay:''})
    }
    
    //绑定门票
    
  }

  render() {
    let { ticketNumber, isShowDetail,data,ticketType,consumptionName,errorText} = this.state
    return (
      <SafeView style={styles.container} forceInset={{ top: 'never' }}>
        <NavPage goBack={this.goBack.bind(this)} refund={true} showGoBack={true} bgColor={'#F6F7F8'} />
        <View style={styles.itemNameLay}><Text style={styles.itemName}>{consumptionName}</Text></View>
        <View style={[styles.itemNameLay,{flexDirection:'row'}]}>
          <Text style={[styles.ticketType,ticketType == '1' ? styles.selectedTicketType : null]}  onPress={() => this.setState({ticketType:'1'},()=>{this.getTicketInfo('','input1') }) }>门票</Text>
          <Text style={[styles.ticketType,ticketType == '2' ? styles.selectedTicketType : null]}  onPress={() => this.setState({ticketType:'2'},()=>{this.getTicketInfo('','input1') })}>景区年卡</Text>
          <Text style={[styles.ticketType,ticketType == '3' ? styles.selectedTicketType : null]} onPress={() => this.setState({ticketType:'3'},()=>{this.getTicketInfo('','input1') })}>腾旅卡</Text>
          <Text style={[styles.ticketType,ticketType == '4' ? styles.selectedTicketType : null]} onPress={() => this.setState({ticketType:'4'},()=>{this.getTicketInfo('','input1') })}>黄冈一卡通</Text>
        </View>
        <View style={styles.mainLay}>
          <View style={{ alignItems: 'center' }}>
            <View style={styles.inputLay}>
              <TextInput
                placeholder="请扫描或输入..."
                underlineColorAndroid="transparent"
                keyboardType={'numeric'}
                returnKeyType={'send'}
                onSubmitEditing={this.getTicketInfo.bind(this,'','input')}
                maxLength={20}
                placeholderTextColor='#ccc'
                style={styles.inputTxt}
                value={ticketNumber}
                defaultValue={ticketNumber}
                onChangeText={(ticketNumber) => this.setState({ ticketNumber })}
              />
              <TouchableOpacity style={{marginRight:10}} onPress={() => RouteHelper.navigate('Qrcode', {
                 callBack: (ticketNumber) => {
                  this.getTicketInfo(ticketNumber,'QRcode')
                }
              })}>
                <Image style={styles.inputCode} source={require('../../img/QRcode.png')} />
              </TouchableOpacity>

              <TouchableOpacity onPress={this.getTicketInfo.bind(this,'','input')}>
                <Image style={{width:20,height:20}} source={require('../../img/select.png')} />
              </TouchableOpacity>

            </View>
            {/* 详情 */}
            {
              isShowDetail&&!errorText ?
                <View style={styles.detail}>
                  
                  {ticketType == '3' || ticketType == '4' ? null : <View style={styles.theme}><Text style={styles.themeName}>{data.goodsName}</Text></View>}
                  {ticketType == '3' || ticketType == '4' ?<View style={styles.itemLay}><Text style={styles.item}>姓名</Text><Text style={styles.item}>{data.personName}</Text></View> : null}
                  {ticketType == '3' || ticketType == '4' ?<View style={styles.itemLay}><Text style={styles.item}>电话</Text><Text style={styles.item}>{data.phone}</Text></View> : null}
                  {ticketType == '3' || ticketType == '4' ?<View style={styles.itemLay}><Text style={styles.item}>入园时间</Text><Text style={styles.item}>{data.useTime}</Text></View> : null}
                  {ticketType == '1' || ticketType == '2' ?<View style={styles.itemLay}><Text style={styles.item}>有效期至</Text><Text style={styles.item}>{data.effectiveEndTime}</Text></View> : null}
                  <View style={styles.itemLay}><Text style={styles.item}>人数</Text><Text style={styles.item}>1人</Text></View>
                </View>
                : null
            }
            {
              errorText ?
              <View style={[styles.detail,{alignItems:'center',justifyContent: 'center',paddingVertical:20}]}>
                <Text style={[styles.themeName,{fontSize:14}]}>没有该号码信息，点击其它按钮继续购票！</Text>
              </View>
              : null
            }
          </View>
          <View >
            {
              isShowDetail === false ?
                <ButtonView title={'确认'} isBg={true} onPress={this.getTicketInfo.bind(this,'','input')} />
                : 
                (
                  data.needPay ? 
                  <ButtonView title={'下一步'} isBg={true} onPress={this.SellTicket.bind(this)} />:
                  <ButtonView title={'立即使用'} isBg={true} onPress={this.immediateUse.bind(this)} />
                )
            }

            <ButtonView title={'其它'} isBg={false} onPress={this.SellTicket.bind(this,'other')} />
          </View>
        </View>
      </SafeView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F6F7F8',
    alignItems: 'center',
  },
  itemNameLay: {
    alignSelf: 'flex-start',
    marginTop: 16,
    paddingHorizontal: screen.width * 0.088,
  },
  itemName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000'
  },
  mainLay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  inputLay: {
    width: screen.width * 0.784,
    height: 42,
    marginTop: 16,
    paddingHorizontal: 16,
    borderRadius: 21,
    borderColor: '#CDD5DC',
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  inputTxt: {
    height: 24,
    padding: 0,
    fontSize: 16,
    flex: 1
  },
  inputCode: {
    width: 24,
    height: 24
  },
  //详情
  detail: {
    width: screen.width * 0.866,
    // height: 124,
    marginTop: 14,
    backgroundColor: 'white',
    borderRadius: 5,
    alignItems: 'center',
    //设置阴影
    shadowOffset: { width: 5, height: 5 },
    shadowColor: '#000',
    shadowOpacity: 0.6,
    shadowRadius: 5,
    paddingVertical:5
  },
  theme: {
    marginVertical: 15,
  },
  themeName: {
    fontSize: 16,
    color: 'rgba(0,0,0,.72)',
  },
  itemLay: {
    width: screen.width * 0.717,
    height: 30,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  item: {
    fontSize: 14,
    color: 'rgba(0,0,0,.42)'
  },
  detailItem: {
    width: screen.width * 0.866,
    height: 32,
    // backgroundColor:'pink',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 24,
    paddingLeft: screen.width * 0.085,
    paddingRight: screen.width * 0.0426,
    borderTopColor: '#CDD5DC',
    borderTopWidth: 1,

  },
  itemTxt: {
    fontSize: 14,
    color: 'rgba(0,0,0,.72)',
  },
  ticketType:{
    fontSize:14,
    flex:1,
    textAlign:'center',
    paddingVertical:4,
    borderRadius:4
  },
  selectedTicketType:{
    backgroundColor:'#687A9B',
    color:'#fff'
  }
})
export default TicketVerify;
